export default class CameraViewportDemo extends Phaser.Scene {
    create() {
        // 1. 创建一个大世界
        this.physics.world.setBounds(0, 0, 2000, 2000);
        this.cameras.main.setBounds(0, 0, 2000, 2000);
        
        // 2. 创建参考网格
        this.createGrid();
        
        // 3. 创建玩家
        this.player = this.physics.add.sprite(1000, 1000, 'player');
        
        // 4. 显示视口边界（重要！）
        this.showViewportBoundary();
        
        // 5. 添加调试信息
        this.addDebugInfo();
        
        // 6. 创建多个不同大小的相机来演示概念
        this.createMultipleCameras();
    }
    
    showViewportBoundary() {
        // 创建一个图形来显示主相机的视口边界
        this.viewportBorder = this.add.graphics();
        this.updateViewportBorder();
        
        // 每帧更新视口边界显示
        this.time.addEvent({
            delay: 100,
            callback: this.updateViewportBorder,
            callbackScope: this,
            loop: true
        });
    }
    
    updateViewportBorder() {
        const camera = this.cameras.main;
        this.viewportBorder.clear();
        
        // 绘制红色边框表示主相机视口
        this.viewportBorder.lineStyle(4, 0xff0000, 1);
        this.viewportBorder.strokeRect(
            camera.scrollX, 
            camera.scrollY, 
            camera.width, 
            camera.height
        );
        
        // 在视口中心添加标签
        this.viewportBorder.fillStyle(0xff0000, 1);
        this.viewportBorder.fillRect(
            camera.scrollX + camera.width/2 - 50,
            camera.scrollY + camera.height/2 - 15,
            100,
            30
        );
        
        this.viewportBorder.fillStyle(0xffffff, 1);
        this.viewportBorder.text = this.add.text(
            camera.scrollX + camera.width/2,
            camera.scrollY + camera.height/2,
            '主相机视口',
            { fontSize: '12px', fill: '#fff' }
        ).setOrigin(0.5);
    }
    
    createMultipleCameras() {
        const { width, height } = this.game.config;
        
        // 创建第二个相机 - 小视口
        this.camera2 = this.cameras.add(width - 250, 10, 200, 150);
        this.camera2.setBackgroundColor(0x0000ff);
        this.camera2.setZoom(0.3);
        this.camera2.setAlpha(0.8);
        this.camera2.setBounds(0, 0, 2000, 2000);
        
        // 创建第三个相机 - 长条形视口
        this.camera3 = this.cameras.add(10, height - 100, width - 20, 80);
        this.camera3.setBackgroundColor(0x00ff00);
        this.camera3.setZoom(0.2);
        this.camera3.setAlpha(0.7);
        this.camera3.setBounds(0, 0, 2000, 2000);
        
        // 所有相机都跟随玩家
        this.cameras.main.startFollow(this.player);
        this.camera2.startFollow(this.player);
        this.camera3.startFollow(this.player);
    }
    
    createGrid() {
        const graphics = this.add.graphics();
        graphics.lineStyle(1, 0x444444, 0.3);
        
        // 绘制网格线
        for (let x = 0; x <= 2000; x += 100) {
            graphics.moveTo(x, 0);
            graphics.lineTo(x, 2000);
        }
        for (let y = 0; y <= 2000; y += 100) {
            graphics.moveTo(0, y);
            graphics.lineTo(2000, y);
        }
        graphics.strokePath();
        
        // 添加坐标标签
        for (let x = 0; x <= 2000; x += 500) {
            for (let y = 0; y <= 2000; y += 500) {
                this.add.text(x + 10, y + 10, `(${x},${y})`, {
                    fontSize: '12px',
                    fill: '#666'
                });
            }
        }
    }
    
    addDebugInfo() {
        const infoText = this.add.text(10, 10, '', {
            fontSize: '14px',
            fill: '#fff',
            backgroundColor: '#00000080'
        }).setScrollFactor(0); // 固定在屏幕上
        
        this.time.addEvent({
            delay: 100,
            callback: () => {
                const mainCam = this.cameras.main;
                const worldView = mainCam.worldView;
                
                infoText.setText([
                    '=== 相机视口概念演示 ===',
                    '',
                    '📐 画布尺寸:',
                    `  ${this.game.config.width} x ${this.game.config.height}`,
                    '',
                    '🔍 主相机视口:',
                    `  位置: (${Math.round(worldView.x)}, ${Math.round(worldView.y)})`,
                    `  大小: ${worldView.width} x ${worldView.height}`,
                    `  缩放: ${mainCam.zoom.toFixed(2)}x`,
                    '',
                    '🌍 世界边界:',
                    `  2000 x 2000`,
                    '',
                    '🎯 玩家位置:',
                    `  (${Math.round(this.player.x)}, ${Math.round(this.player.y)})`,
                    '',
                    '💡 关键理解:',
                    '• 红色边框 = 主相机看到的区域',
                    '• 蓝色/绿色框 = 其他相机视口',
                    '• 相机移动 = 红色边框在世界中移动'
                ].join('\n'));
            },
            callbackScope: this,
            loop: true
        });
    }
    
    update() {
        // 玩家控制
        const cursors = this.input.keyboard.createCursorKeys();
        
        if (cursors.left.isDown) {
            this.player.setVelocityX(-200);
        } else if (cursors.right.isDown) {
            this.player.setVelocityX(200);
        } else {
            this.player.setVelocityX(0);
        }
        
        if (cursors.up.isDown) {
            this.player.setVelocityY(-200);
        } else if (cursors.down.isDown) {
            this.player.setVelocityY(200);
        } else {
            this.player.setVelocityY(0);
        }
        
        // 相机缩放控制
        if (this.input.keyboard.checkDown(this.input.keyboard.addKey('Z'), 100)) {
            this.cameras.main.zoom += 0.1;
        }
        if (this.input.keyboard.checkDown(this.input.keyboard.addKey('X'), 100)) {
            this.cameras.main.zoom = Math.max(0.1, this.cameras.main.zoom - 0.1);
        }
    }
}